@import url("@/css/mixins/scroll");

.jb-bk-search-select {
  height: 32px;
  font-size: 12px;

  .search-select-wrap {
    position: relative;
    height: unset;
    min-height: 32px;
    overflow: hidden;
    color: #63656e;
    border: 1px solid #c4c6cc;
    border-radius: 2px;
    box-sizing: border-box;
    transition: border 0.2s linear;

    .search-prefix {
      display: flex;
      height: 100%;
      flex: 0 0 auto;
      align-items: center;
    }

    .search-tag-group {
      position: relative;
      min-height: 26px;
      padding: 0 6px;
      font-size: 0;
      line-height: 0;
      transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .search-input-box {
      position: relative;
      display: inline-block;
      min-width: 40px;
      min-height: 22px;
      margin-top: 4px;
      font-size: 12px;
      line-height: 22px;
      color: #63656e;
      vertical-align: middle;
      border: none;

      .input-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        background: transparent;
        border: none;
        outline: none;
        resize: none;

        @mixin scroller;
      }
    }

    .search-tag-box {
      .search-tag {
        display: inline-flex;
        padding-right: 20px;

        .tag-label {
          word-break: keep-all;
        }

        .tag-value {
          word-break: break-all;
          cursor: pointer;
        }

        .tag-value-edit {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          padding: 0;
          font-size: inherit;
          line-height: inherit;
          color: inherit;
          background: transparent;
          border: none;
          outline: none;
          resize: none;

          &::selection {
            background: var(--color-primary-hover-light);
          }
        }
      }

      &.focused {
        background: inherit !important;

        .search-tag {
          padding-right: 0;
        }
      }

      .tag-clear {
        position: absolute;
        top: 4px;
        right: 3px;
        display: inline-block;
        font-size: 14px;
        line-height: normal;
        color: #979ba5;
        text-align: center;
        cursor: pointer;
      }
    }

    .mult-tag-placeholder {
      padding: 0 8px;
    }

    .search-tag-box,
    .mult-tag-placeholder {
      position: relative;
      display: inline-block;
      padding-left: 8px;
      margin: 4px 6px 0 0;
      font-size: 12px;
      line-height: 22px;
      color: #63656e;
      vertical-align: middle;
      background: #f0f1f5;
      border-radius: 2px;

      &:hover {
        background: #dcdee5;

        .tag-clear {
          color: #63656e;
        }
      }
    }

    .search-nextfix {
      @extend .search-prefix;

      position: absolute;
      top: 6px;
      right: 0;
      color: #c4c6cc;

      .search-clear {
        width: 12px;
        height: 12px;
        margin-right: 6px;
        font-size: 14px;
        color: #c4c6cc;

        &:hover {
          color: #979ba5;
          cursor: pointer;
        }
      }

      .search-nextfix-icon {
        margin-right: 8px;
        font-size: 16px;
        transition: color 0.2s linear;

        &.is-focus {
          color: #3c96ff;
          background: #fff !important;
          border-color: #3c96ff !important;
        }
      }
    }

    &::-webkit-scrollbar {
      width: 3px;
      height: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background: #e6e9ea;
      border-radius: 20px;
      box-shadow: inset 0 0 6px rgb(204 204 204 / 30%);
    }
  }

  &.focused {
    .search-select-wrap {
      overflow-y: auto;
      color: #3c96ff;
      background: #fff !important;
      border-color: #3c96ff !important;
    }
  }

  .bk-select-tips {
    display: flex;
    margin-top: 5px;
    font-size: 12px;
    line-height: 16px;
    color: #ea3636;
    align-items: center;

    .select-tips {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      font-size: 16px;
    }
  }
}
